<template>
	<EPopup
		@input="onChange"
		:value="value"
		@touchmove.stop.prevent="stopScrolling"
		:safeAreaInsetBottom="true"
		mode="top"
		:border-radius="24"
		:maskCloseAble="false"
	>
		<view class="select-popup">
			<view class="dy-main-content" v-if="listData.length">
                <scroll-view scroll-y class="scroll-view">
                    <view class="flex account-item col-center" @click="sureChoose(item)" v-for="item in listData" :key="item.id">
                       {{item.label || ''}}
                    </view>
                </scroll-view>
			</view>
		</view>
	</EPopup>
</template>

<script>
import EPopup from '@/components/EPopup/EPopup';

export default {
	name: 'selectPopup',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		listData: {
			type: Array,
			default: () => []
		}
	},

	watch: {},
	components: {
		EPopup
	},
	data() {
		return {
		
        };
	},
	methods: {
		onChange(e) {
			this.$emit('input', e);
		},
		onCancel() {
			this.$emit('input', false);
		},
		sureChoose() {
			this.onCancel();
			this.$emit('clickSure');
		},
		// 阻止遮罩滚动穿透
		stopScrolling() {
			return;
		}
	}
};
</script>

<style lang="scss">
@import '@/style/common.scss';

// select-popup
.select-popup{
	width: 100%;
	height: auto;
	padding: 20rpx;
	max-height: 600rpx;
	background: #fff;
    overflow-y: scroll;
	background: #fbfbfb;
    min-height: 200rpx;
	border-radius:0 0 24rpx 24rpx;
    .scroll-view {
        height: 100%;
    }
}
</style>
